<template>
	<view class="wrapper">
		<view class="user-bg">
			<image src="../../static/images/news-bg.png" mode="widthFix" class="user-img"></image>
		</view>
		<custom-nav-bar :opacityVal="opacityVal" :titleName="'排行榜单'" :titleColor="'#000'"></custom-nav-bar>
		<view :style="{height: `${customBar}px`}"></view>
		<scroll-view scroll-y="true" class="main-content" :style="{ height: `calc(100vh - ${customBar}px)`}">
			<view class="top-handle">
				<view class="type-filtering">
					<view class="type-box" v-for="(item, index) in typeList" :key="index">
						<view class="type-btn" :class="{'typeActive': item.isSelect}" @click="switchSelection(item, index)">
						    {{item.label}} 
						</view>
						<view class="underline" :class="{'lineActive': item.isSelect}" ></view>
					</view>
				</view>
				<view class="time-switch">
					<view class="switch-bar" @click="timeToogleBar()">
						<view class="label">{{timeScreenListStr}}</view>
						<image src="../../static/images/data-black-down.png" mode="aspectFit" class="down"
						:class="{'switch-down-rotate': showTimeSwitch, 'switch-down-rotate-reverse': !showTimeSwitch}">
						</image>
					</view>
					<view class="time-menu" v-if="showTimeSwitch" :class="{'time-menu-down': showTimeSwitch}">
						<view class="item" v-for="(item, index) in timeScreenList" :key="index" @click="timeSwitchBarSelected(item)">
							{{item.label}}
						</view>
					</view>
				</view>
			</view>
			<view class="choose-box">
				<custom-drop-down :screenList="clubScreenList" v-if="selectIndex == 0"/>
				<custom-drop-down :screenList="cityScreenList" v-if="selectIndex == 1"/>
				<view class="search-box" v-if="selectIndex == 2">
					<input type="text" placeholder="搜索城市、俱乐部" class="search-input" v-model="searchVal"/>
					<image src="../../static/images/score-search.png" mode="aspectFit" class="search-img"></image>
				</view>
			</view>
			<view class="score-type-filtering">
				<view class="type-box" v-for="(item, index) in scoreTypeList" :key="index">
					<view class="type-btn" :class="{typeActive: item.isSelect}" @click="switchScoreTypeSelection(item)">
						{{item.label}}
					</view>
					<view class="underline" :class="{'lineActive': item.isSelect}" ></view>
				</view>
			</view>
			<view class="podium-box">
				<view class="img-box">
					<view class="podium-2 podium">
						<view class="top">
							<image src="../../static/images/score-silver-crown.png" mode="aspectFit" class="crown-img"></image>
							<view class="avatar-box">
								<image src="../../static/images/data-left-player.png" mode="aspectFit" class="avatar-img"></image>
							</view>
							<view class="player-name">丁俊晖</view>
							<view class="player-lv">
								<text>Lv 111</text>
							</view>
						</view>
						<image src="../../static/images/score-podium2.png" mode="aspectFit" class="podium-img"></image>
					</view>
					<view class="podium-1 podium">
						<view class="top">
							<image src="../../static/images/score-gold-crown.png" mode="aspectFit" class="crown-img"></image>
							<view class="avatar-box">
								<image src="../../static/images/data-left-player.png" mode="aspectFit" class="avatar-img"></image>
							</view>
							<view class="player-name">丁俊晖</view>
							<view class="player-lv">
								<text>Lv 100</text>
							</view>
						</view>
						<image src="../../static/images/score-podium1.png" mode="aspectFit" class="podium-img"></image>
					</view>
					<view class="podium-3 podium">
						<view class="top">
							<image src="../../static/images/score-copper-crown.png" mode="aspectFit" class="crown-img"></image>
							<view class="avatar-box">
								<image src="../../static/images/data-left-player.png" mode="aspectFit" class="avatar-img"></image>
							</view>
							<view class="player-name">丁俊晖</view>
							<view class="player-lv">
								<text>Lv 91</text>
							</view>
						</view>
						<image src="../../static/images/score-podium3.png" mode="aspectFit" class="podium-img"></image>
					</view>
				</view>
			</view>
			<view class="ranking-box">
				<view class="markers"></view>
				<view class="top-8">前8名</view>
				<view class="ranking-list">
					<view class="ranking-item" v-for="(item, index) in 8" :key="index">
						<view class="left-info">
							<view class="index">1</view>
							<image src="../../static/images/data-left-player.png" mode="aspectFit" class="avatar"></image>
							<view class="player-name">特鲁姆普</view>
							<view class="player-lv">
								<text>Lv 91</text>
							</view>
						</view>
						<view class="right-handle">
							<view class="grips">
								<text>交过手</text>
							</view>
							<view class="like-btn-box">
								<view class="like-btn" @click="giveLike(item)">
									<image src="../../static/images/news-unliked.png" mode="aspectFill" class="like-img" v-if="!item.liked"></image>
									<image src="../../static/images/news-liked.png" mode="aspectFill" class="like-img" v-else></image>
								</view>
								<text>90</text>
							</view>
						</view>
						
					</view>
				</view>
				<view class="top-8">前16名</view>
			</view>
			
		</scroll-view>
		<cover-view class="bike-detail-box" v-if="isBikeDetailsShow" @click="closePopup()">
			<cover-view class="bike-detail" :class="{'detailTransform': isBikeDetailsShow}">
				<cover-view class="bike-title">
					<cover-view class="title-left">
						<cover-view class="bg"></cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
	import customNavBar from "@/components/custom-nav-bar.vue";
	import customDropDown from "@/components/custom-drop-down.vue";
	
	export default {
		data() {
			const customBar	= uni.getStorageSync('CustomBar');
			const timeScreenList = [{
				label: '本周榜',
				value: 1,
			},{
				label: '近一个月榜',
				value: 2,
			},{
				label: '总榜',
				value: 3,
			}];
			return {
				customBar,
				opacityVal: 'transparent',
				isBikeDetailsShow: false,
				showTimeSwitch: false,
				selectIndex: 0,
				timeScreenList,
				timeScreenListStr: timeScreenList[0].label,
				searchVal: '',
				typeList: [{
					label: '俱乐部',
					type: 1,
					isSelect: true,
				},{
					label: '城市',
					type: 2,
					isSelect: false,
				},{
					label: '全国',
					type: 3,
					isSelect: false,
				}],
				scoreTypeList: [{
					label: '评级',
					type: 1,
					isSelect: true,
				},{
					label: '胜率',
					type: 2,
					isSelect: false,
				},{
					label: '接清',
					type: 3,
					isSelect: false,
				},{
					label: '炸清',
					type: 4,
					isSelect: false,
				},{
					label: '大金',
					type: 5,
					isSelect: false,
				},{
					label: '小金',
					type: 6,
					isSelect: false,
				},{
					label: '黄金9',
					type: 7,
					isSelect: false,
				}],
				clubScreenList: [{
					label: '（北京）中式台球俱乐部（北京）中式台球俱乐部（北京）中式台球俱乐部',
					value: 1,
				},{
					label: '（上海）中式台球俱乐部',
					value: 2,
				},{
					label: '（北京）中式台球俱乐部（北京）中式台球俱乐部（北京）中式台球俱乐部',
					value: 1,
				},{
					label: '（上海）中式台球俱乐部',
					value: 2,
				},{
					label: '（北京）中式台球俱乐部（北京）中式台球俱乐部（北京）中式台球俱乐部',
					value: 1,
				},{
					label: '（上海）中式台球俱乐部',
					value: 2,
				}],
				cityScreenList: [{
					label: '北京市',
					value: 1,
				},{
					label: '天津市',
					value: 2,
				},{
					label: '上海市',
					value: 3,
				},{
					label: '长沙市',
					value: 4,
				},{
					label: '重庆市',
					value: 5,
				},{
					label: '香港特别行政区',
					value: 6,
				}],
			}
		},
		components: {
			customNavBar,
			customDropDown,
		},
		watch: {
			isBikeDetailsShow(newVal, oldVal) {
				if(newVal) {
					uni.hideTabBar();
				} 
				if(!newVal) {
					uni.showTabBar();
				}
			},
		},
		onLoad() {
			uni.$on('closeScoreDropDown', () => {
				this.showTimeSwitch = false;
			})
		},
		onShow() {
			
		},
		methods: {
			giveLike(item) {
				item.liked = !item.liked;
			},
			timeSwitchBarSelected(item) {
				this.timeScreenListStr = item.label;
				this.showTimeSwitch = false;
			},
			timeToogleBar() {
				this.showTimeSwitch = !this.showTimeSwitch;
				uni.$emit('closeDropDown');
			},
			switchSelection(item, index){
				this.selectIndex = index;
				this.typeList.forEach((item, index) => {
					item.isSelect = false;
				});
				item.isSelect = true;
			},
			switchScoreTypeSelection(item) {
				this.scoreTypeList.forEach((item, index) => {
					item.isSelect = false;
				});
				item.isSelect = true;
			},
			openPopup() {
				this.isBikeDetailsShow = true;
			},
			closePopup() {
				this.isBikeDetailsShow = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper{
		position: relative;
		background: #F1F2F6;
		@mixin font-style {
			background: $gradient-color;
			-webkit-background-clip: text;
			color: transparent;
			font-weight: bold;
		}
		.user-bg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			.user-img{
				width: 100%;
			}
		}
		.main-content{
			box-sizing: border-box;
			position: relative;
			padding: 0 10upx;
			.top-handle{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20upx 0 26upx;
				.type-filtering{
					display: flex;
					align-items: center;
					.type-box{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.type-btn{
							margin: 0 20upx;
							color: $gray-color;
							font-size: 36upx;
							margin-bottom: 8upx;
						}
						.typeActive{
							@include font-style();
							font-size: 40upx;
						}
						.underline{
							height: 6upx;
							border-radius: 4upx;
							width: 70upx;
							background: transparent;
						}
						.lineActive{
							background: $main-color;
						}
					}
				}
				.time-switch{
					width: auto;
					background: rgba(255, 255, 255, 0.6);
					position: relative;
					top: -10upx;
					border-radius: 16upx;
					margin-right: 20upx;
					.switch-bar{
						width: 100%;
						display: flex;
						height: 66upx;
						align-items: center;
						padding: 0 16upx;
						overflow: hidden;
						.label{
							width: calc(100% - 52px);
							margin: 0 16upx;
							color: $gray-color;
							font-size: 26upx;
							white-space: nowrap;       
						    overflow: hidden;    
						    text-overflow: ellipsis; 
						}
						.down{
							width: 40upx;
							height: 40upx;
						}
						.switch-down-rotate{
							transform: rotate(180deg); /* 将图片旋转180度 */
							transition: transform 0.5s ease;
						}
						.switch-down-rotate-reverse{
							transform: rotate(0deg);
							transition: transform 0.5s ease; /* 添加过渡动画效果，持续0.5秒，缓和动画效果 */
						}
					}
					.time-menu{
						width: calc(100% - 12px);
						color: $gray-color;
						display: flex;
						flex-direction: column;
						background: #fff;
						border-radius: 20upx;
						position: absolute;
						top: 76upx;
						left: 0;
						z-index: 9;
						padding: 0 14upx;
						box-shadow: 0px 0px 10upx 6upx rgba(0, 0, 0, 0.1);
						max-height: 300upx;
						overflow-y: scroll;
						.item{
							font-size: 26upx;
							padding: 14upx 0;
						}
					}
					.time-menu-down{
						animation: timemenumove 0.2s ease 0s 1 normal;
					}
					@keyframes timemenumove {
						0% {height: 0;}
						50% {height: 50upx;}
						100% {height: 120upx;}
					}
				}
			}
			.choose-box{
				width: 100%;
				box-sizing: border-box;
				padding: 0 20upx;
				margin-bottom: 20upx;
				.search-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					background: rgba(255, 255, 255, 0.6);
					border-radius: 16upx;
					height: 66upx;
					padding: 0 16upx;
					box-sizing: border-box;
					.search-input{
						flex: 1;
						font-size: 26upx;
						margin: 0 16upx;
						color: $gray-color;
					}
					.search-img{
						width: 46upx;
						height: 46upx;
					}
				}
			}
			.score-type-filtering{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10upx 20upx 0;
				.type-box{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.type-btn{
						color: $gray-color;
						font-size: 30upx;
						margin-bottom: 8upx;
					}
					.typeActive{
						@include font-style();
					}
					.underline{
						height: 4upx;
						border-radius: 2upx;
						width: 50upx;
						background: transparent;
					}
					.lineActive{
						background: $main-color;
					}
				}
			}
			.podium-box{
				padding: 0 40upx;
				.img-box{
					display: flex;
					align-items: flex-end;
					.podium{
						flex: 1;
						.top{
							width: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							.crown-img{
								width: 62upx;
								height: 62upx;
								position: relative;
								left: -36upx;
								top: 14upx;
							}
							.avatar-box{
								width: 152upx;
								height: 152upx;
								background-image: linear-gradient(to bottom, #A09DB5, #867FB1);
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
								.avatar-img{
									width: 142upx;
									height: 142upx;
									border-radius: 50%;
								}
							}
							.player-name{
								font-size: 38upx;
								font-weight: 600;
								color: $black-color;
								margin-bottom: 6upx;
							}
							.player-lv{
								background: #e2ecf9;
								height: 40upx;
								line-height: 40upx;
								padding: 0 16upx;
								border-radius: 20upx;
								text{
									@include font-style();
									font-size: 20upx;
								}
							}
						}
						
					}
					.podium-2{
						flex: 1;
						.top{
							.avatar-box{
								background-image: linear-gradient(to bottom, #A09DB5, #867FB1);
							}
						}
						.podium-img{
							width: 100%;
							height: 130upx;
							vertical-align: middle;
						}
					}
					.podium-1{
						flex: 1.5;
						.top{
							.avatar-box{
								background-image: linear-gradient(to bottom, #FEC942, #FFB600);
							}
						}
						.podium-img{
							width: 100%;
							height: 180upx;
							vertical-align: middle;
						}
					}
					.podium-3{
						flex: 1;
						.top{
							.avatar-box{
								background-image: linear-gradient(to bottom, #E09F40, #FF9800);
							}
						}
						.podium-img{
							width: 100%;
							height: 130upx;
							vertical-align: middle;
						}
					}
				}
			}
			.ranking-box{
				width: 94%;
				background: #fff;
				margin: 0 auto;
				position: relative;
				top: -4upx;
				border-radius: 20upx 20upx 0 0;
				padding: 14upx 20upx 20upx;
				box-sizing: border-box;
				.markers{
					width: 80upx;
					height: 8upx;
			        background: $gray-color;
					border-radius: 4upx;		
					margin: 0 auto;
				}
				.top-8{
					font-size: 28upx;
					color: $gray-color;
					letter-spacing: 6upx;
				}
				.ranking-list{
					display: flex;
					flex-direction: column;
					.ranking-item{
						margin: 20upx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.left-info{
							display: flex;
							align-items: center;
							.index{
								color: $gray-color;
								font-size: 34upx;
							}
							.avatar{
								width: 70upx;
								height: 70upx;
								border-radius: 50%;
								margin: 0 20upx 0 30upx;
							}
							.player-name{
								font-size: 32upx;
								font-weight: 500;
								color: $black-color;
								margin-right: 40upx;
							}
							.player-lv{
								background: #e2ecf9;
								height: 40upx;
								line-height: 40upx;
								padding: 0 16upx;
								border-radius: 20upx;
								text{
									@include font-style();
									font-size: 22upx;
								}
							}
						}
						.right-handle{
							display: flex;
							align-items: center;
							.grips{
								background: #ffede8;
								height: 40upx;
								line-height: 40upx;
								padding: 0 16upx;
								border-radius: 20upx;
								margin-right: 20upx;
								text{
									color: #FF5219;
									font-size: 22upx;
								}
							}
							.like-btn-box{
								display: flex;
								align-items: center;
								position: relative;
								.like-btn{
									.like-img{
										width: 40upx;
										height: 40upx;
									}
								}
								text{
									margin-left: 10upx;
									color: $gray-color;
									font-size: 24upx;
									font-weight: 600;
								}
							}
						}
						
					}
				}
			}
		}
		.bike-detail-box{
			background: rgba(0, 0, 0, 0.4);
			width: 100%;
			height: 100vh;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 19;
			.bike-detail {
				position: absolute;
				bottom: 0;
				left: 0;
				background: #f5f5f5;
				width: calc(100% - 40upx);
				padding: 20upx;
				border-radius: 40upx 40upx 0 0;
				.bike-title {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20upx 0;
					.title-left{
						width: 100%;
						height: 70upx;
						position: relative;
						padding: 0 20upx;
						font-size: 36upx;
						.title-text{
							position: absolute;
							top: 0;
							left: 16upx;
							z-index: 2;
							font-weight: 600;
						}
						.bg{
							position: absolute;
							top: 24upx;
							left: 0;
							z-index: 1;
							width: 172upx;
							height: 30upx;
							background: #FFD9B5;
							border-radius: 12upx;
						}
						.bg-2{
							width: 204upx;
						}
						.bg-3{
							width: 104upx;
						}
					}
				}
			}
			.detailTransform{
				animation:detailmove 0.2s ease 0s 1 normal;
			}
			@keyframes detailmove {
				0% {bottom:-20vh;}
				100% {bottom:0;}
			}
		}	
		
	}
</style>
